<template>
	<view class="people-history" >
		<!-- 搜索 -->
		<view class="history-search" > 
			<u-search :show-action="false" height="80" border-color="#d7d7d7" bg-color="#ffffff" placeholder="请输入小镇、年份、关键字" v-model="searchName" @change="handSearch"></u-search>
		</view>
		
		<!-- 列表 -->
		<view class="history-box" v-for="(item,index) in dataList" :key="index">
			<image :src="item.url" ></image>
			<view class="box-msg">
				<view class="msg-sp" >
					姓名：<span>{{item.name}}</span>
				</view>
				<view  class="msg-sp"  >
					编号：<span>{{item.num}}</span>
				</view>
				<view class="msg-sp" >
					创建日期：<span>{{item.time}}</span>
				</view>
				<view class="msg-sp" >
					所在馆区：<span>{{item.area}}</span>
				</view>
			</view>
			<span class="box-btn" >追忆</span>
		</view>
		<view class="add-btn" >
			<span>十 墓位绑定</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchName:'', // 搜索名称
				dataList:[
					{
						url:'../../../static/uview/common/z_people.png',
						name:'张忠良',
						num:'AZX001',
						time:'2019-03-01',
						area:'金吉镇-B区-1排-20号'
					},
					{
						url:'../../../static/uview/common/z_people.png',
						name:'王善民',
						num:'AZX001',
						time:'2019-01-20',
						area:'蒼榕镇-C区-1排-20号'
					},
					{
						url:'../../../static/uview/common/z_people.png',
						name:'屈莹莹',
						num:'AZX001',
						time:'2018-12-25',
						area:'紫金镇-D区-1排-20号'
					},
					{
						url:'../../../static/uview/common/z_people.png',
						name:'李军正',
						num:'AZX001',
						time:'2018-10-20',
						area:'青竹镇-B区-1排-20号'
					}
				]
			};
		},
		
		methods:{
			handSearch(value){
				console.log(value)
			}
		}
	}
</script>

<style lang="less">
.people-history{
	font-size: 28upx;
	position: relative;
	.history-search{
		padding: 10upx 20upx 6upx 20upx;
	}
	
	.history-box{
		border-bottom: 2upx solid #e4e4e4;
		position: relative;
		padding:30upx 20upx 30upx 30upx;
		display: flex;
		image{
			width: 160upx;
			height: 210upx;
			border: 10upx solid #f9c38c;
		}
		.box-msg{
			flex: 1;
			margin-left: 30upx;
			padding-top: 8upx;
			.msg-sp{
				color: #000000;
				margin-bottom: 16upx;
				span{
					font-weight: bold;
				}
			}
		}
		.box-btn{
			position: absolute;
			top: 18upx;
			right: 20upx;
			font-size: 28upx;
			color: #ffffff;
			background: #f9c38c;
			opacity: 0.9;
			padding: 10upx 34upx;
			border-radius: 6upx;
		}
		.box-btn:active{
			opacity: 1;
		}
	}
	.add-btn{
		text-align: center;
		height: 90upx;
		line-height: 90upx;
		margin-top:50upx;
		margin-bottom: 30upx;
		span{
			font-size: 32upx;
			color: #ffffff;
			background: #f5942b;
			padding: 14upx 74upx;
			border-radius: 6upx;
		}
	}
}
</style>
